<template>
    <div class="pad">
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :pageCount="tableData.rows"
            :tableLabel="tableLabel"
            @handleDetail="handleDetail"
            height="89vh"
            v-loading="loading"
        />
        <!-- table end -->
        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDetail"
            center
            title="维修厂详情"
            top="13vh"
            v-el-drag-dialog
            @close="sid = '' , activeyys = ''"
        >
            <div class="childbox" v-loading="detailLoading">
                <div class="left" style="padding-top:15px;">
                    <el-form label-width="100px" label-position="left" class="form">
                        <el-form-item label="营业执照">
                            <img :src="detail.license" >
                        </el-form-item>
                        <el-form-item label="维修厂图片">
                            <img :src="photo" >
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right" style="border-left:solid 1px #efefef;">
                    <el-form label-width="100px">
                        <el-form-item label="维修厂简介">
                            {{detail.about}}
                        </el-form-item>
                        <el-form-item label="维修厂主修">
                            {{detail.major}}
                        </el-form-item>
                        <el-form-item label="开户行">
                            {{detail.bank}}
                        </el-form-item>
                        <el-form-item label="开户分行">
                            {{detail.branch}}
                        </el-form-item>
                        <el-form-item label="开户名">
                            {{detail.account_name}}
                        </el-form-item>
                        <el-form-item label="银行卡号">
                            {{detail.account}}
                        </el-form-item>
                        <el-form-item label="地址">
                            {{detail.province}}{{detail.city}}{{detail.county}}
                        </el-form-item>
                        <el-form-item label="地址">
                            {{detail.province}}{{detail.city}}{{detail.county}}
                        </el-form-item>
                        <el-form-item label="绑定运营商">
                            <el-select v-model="activeyys" clearable placeholder="请选择">
                                <el-option
                                    v-for="item in agentList"
                                    :key="item.id"
                                    :label="item.leader"
                                    :value="item.aid"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="about">
                <el-button type="primary" @click="about">
                    通过
                </el-button>
            </div>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    export default {
        name: "registration",
        data () {
            return {
                page: 1,
                pageSize:8,
                tableData: {},
                tableLabel: [
                    {
                        label: '公司名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '操作',
                        detail: true,
                        btnText: '详情',
                        methodName: 'handleDetail'
                    }
                ],
                isShowDetail: false,
                detail: {},
                photo:[],
                agentList: [],
                activeyys: '',
                loading:false,
                detailLoading: false,
                sid: ''
            }
        },
        components: {
          tableDataEl
        },
        methods: {
            async init (search = '') {
                this.loading = true;
                let paramsStr = Object.assign(search,{page: this.page, pageSize: this.pageSize});
                let res = await this.api.shopAuditList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail(...value) {
                this.sid = value[1]['id'];
                this.detailLoading = true;
                this.isShowDetail = true;
                let res = await this.api.getShopDetail({sid: value[1]['id']});
                let res1 = await this.api.agentList();
                if(res.code && res1.code) {
                    this.agentList = res1.data;
                    this.detail = res.data;
                    this.photo = res.data.photo[0];
                    this.detailLoading = false;
                    new Viewer(document.querySelector('.childbox'))
                }else {
                    this.$message({
                        type: 'error',
                        message: '数据请求出错'
                    })
                }

            },
            async about () {
                let type = null
                let res = await this.api.passShop({sid: this.sid, aid: this.activeyys});
                if(res.code) {
                    type = 'success'
                    this.init();
                    this.isShowDetail = false;
                } else {
                    type = 'error'
                }
                this.$message({
                    type,
                    message: res.msg
                })
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding:10px;
        box-sizing:border-box;
    }
    .pad img {
        cursor:pointer;
    }
    .form img {
        width:150px;
    }
    .childbox {
        border:solid 1px #efefef;
        overflow:hidden;
    }
    .right,.left {
        width:50%;
        float:left;
        height:420px;
        padding-left:10px;
        box-sizing:border-box;
        overflow:auto;
    }
    .el-form-item {
        margin-bottom:5px;
    }
    .about {
        text-align:center;
        padding-top:15px;
    }
</style>
